<template>
   <div class="context">
    <search-i class="nav"></search-i>
    <!-- <van-nav-bar class="nav" title="值得买" left-text="返回" right-text="按钮" left-arrow /> -->
    <div class="headerYang">

      <img class="u-title" src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
      <div class="u-text">严选好物 用心生活</div>
      <img class="u-bg" src="https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="">

      <div class="u-swiper">
        <swiper class="mySwiper" :pagination="{ clickable: true }" :modules="modules" :slides-per-view="4" :space-between="1">
          <swiper-slide class=" swiper-Item" v-for="(item,index) in navList" :key="index">
            <div v-for="a in item" :key="a.id">
              <div class="Item-top">
                <img class="itemImg" :src="a.picUrl" alt="" srcset="">
                <div class="itemtext">{{a.mainTitle}}</div>
                <div class="itemHei">{{a.viceTitle}}</div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>

    </div>
    <!-- 瀑布流 -->
    <div class="waterfall" fit-width="true" v-masonry gutter="10" transition-duration="0.001s" item-selector=".item">
      <div v-masonry-tile class="item" v-for="(item, index) in recommendStore.toPics" :key="index">
        <div class="masItem">
          <img class="masBanner" :src="item.picUrl" alt="" srcset="">
          <div class="bannerText">{{item.title}}</div>
          <div class="ItemBotom">
            <div class="bottomLeft">
              <img class="masImg" :src="item.avatar" alt="">
              <span class="masText">{{item.nickname}}</span>
            </div>
            <div class="bpttomRight">
              <img class="masEyes" src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="">
              <span class="masNum">98k</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang= 'ts'>
import SearchI from '../../components/SearchI.vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper';
import 'swiper/css/pagination';
import 'swiper/css';

export default {
  name: 'Recommend',
  components: {
    Swiper,
    SwiperSlide,
    SearchI
  }
};
</script>
<script lang = 'ts' setup>
import { computed, onMounted, ref, watch } from 'vue';
import { useRecommendStore } from '../../store/recommend';

const modules = [Pagination];
let recommendList = ref<any>([]);
let navList = ref<any>([]);
let page = ref(1);
let size = ref(1);
const recommendStore = useRecommendStore();
onMounted(async () => {
  //轮播图相关
  await recommendStore.getRecommendList();
  recommendList = recommendStore.recommendList;
  let navleft = recommendList.splice(0, 7);
  let navRight = recommendList;
  navList.value = navleft.map((item, index) => {
    return [item, navRight[index]];
  });

  // 瀑布流
  await recommendStore.getRecAutoList(page.value, size.value);
  console.log(recommendStore.toPics);
  handleScroll();
});

const handleScroll = () => {
  window.addEventListener('scroll', () => {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //获取当前页面的滚动条纵坐标位置
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //页面的可视高度
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //内容高度 可滚动内容高度
    // console.log(windowHeight, scrollHeight);
    if (Math.ceil(scrollTop) + windowHeight == scrollHeight) {
      page.value++;
      size.value++;
      console.log('触底了');
      recommendStore.getRecAutoList(page.value, size.value);
    }
  });
};
</script>


<style lang="less" scoped>
.context {
  height: 100%;
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  .nav {
    width: 375px;
    height: 46px;
    position: fixed;
    background-color: white;
    top: 0;
  }
  .headerYang {
    position: relative;
    height: 400px;
    flex-shrink: 0;
    .u-title {
      width: 65px;
      height: 35px;
      position: absolute;
      left: 5px;
      top: 71px;
    }
    .u-text {
      position: absolute;
      color: white;
      left: 70px;
      top: 82px;
      font-size: 16px;
    }
    .u-bg {
      width: 375px;
      // height: 259px;
    }
    .u-swiper {
      position: absolute;
      width: 355px;
      height: 270px;
      background-color: white;
      border-radius: 10px;
      left: 50%;
      top: 114px;
      transform: translatex(-50%);
      .mySwiper {
        height: 100%;
        .swiper-Item {
          display: flex;
          flex-direction: column;
          align-items: center;
          .Item-top,
          .Item-bottom {
            margin-top: 16px;
          }
          .itemImg {
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
          .itemtext {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
          }
          .itemHei {
            font-size: 12px;
            text-align: center;
          }
          .pagination {
            position: absolute;
            z-index: 20;
            bottom: 10px;
            width: 20px;
            height: 20px;
            background-color: pink;
            text-align: center;
          }
        }
      }
      :deep(.swiper-pagination) {
        position: absolute;
        // top: 300px;
        z-index: 999;
        bottom: 10px;
        .swiper-pagination-bullet {
          border-radius: 0%;
          width: 20px;
          margin: 0;
          height: 2px;
        }
        .swiper-pagination-bullet-active {
          background-color: red;
        }
      }
    }
  }
  .waterfall {
    widows: 80%;
    .item {
      .masItem {
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        background-color: white;
        border-radius: 20px;
        margin: 2px 1px 10px 1px;
        .masBanner {
          width: 172.5px;
          border-radius: 10px;
          // width: 100%;
        }
        .bannerText {
          width: 172.5px;
          font-size: 12px;
          margin: 10px 2px;
        }
        .ItemBotom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 5px 5px;
          .bottomLeft {
            display: flex;
            align-items: center;
            .masImg {
              width: 24px;
              height: 24px;
              border-radius: 50%;
            }
            .masText {
              font-size: 12px;
            }
          }
          .bpttomRight {
            display: flex;
            .masEyes {
              width: 16px;
              height: 16px;
            }
            .masNum {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>